<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
    <%@ taglib uri="http://www.extremecomponents.org" prefix="ec"%>
<%@taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<jsp:include page="includeCSSjs.jsp" />
	
	<script type="text/javascript">
	function onTableClick(	idPeriodo,
			nombrePeriodo,
			inicioPeriodo,
			finPeriodo	) {
		
		$("#idPeriodo").val(idPeriodo);
		$("#nombrePeriodo").val(nombrePeriodo);
		$("#inicioPeriodo").val(inicioPeriodo);
		$("#finPeriodo").val(finPeriodo);
		showEditBtn();
	}
	
	function showEditBtn() {
		$(".btnEditar").hide("fast");
		$(".btnAgregar").hide("slow");
		$(".btnEditar").show("slow");

	}

	function hiddenEditBtn() {
		$(".btnEditar").hide("fast");
		$(".btnAgregar").show("slow");
	}
	</script>
	
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Periodo Catalog</title>
</head>
<body>
<div id="container">

<!-- Aqui va el menu -->
<jsp:include page="menu.jsp" />
<div id="content">

<h2 class="divTextoEncabezado">Periodo</h2>

<form:form method="post" action="addPeriodo"
		commandName="periodo">
		
		<form:errors path="*" cssClass="errorblock" element="div" />

		<table>
			<form:hidden path="idPeriodo" />
			
			<tr>
				<td><form:label path="nombrePeriodo" class="text0">Periodo: </form:label></td>
				<td><form:input path="nombrePeriodo" class="required inputTextFacturaAgregar"/></td>
				<td><form:errors path="nombrePeriodo*" cssClass="error" /></td>
			</tr>
			<tr>
				<td><form:label path="inicioPeriodo" class="text0">Inicio periodo: </form:label></td>
				<td><form:input path="inicioPeriodo" class="required inputTextFacturaAgregar"/></td>
				<td><form:errors path="inicioPeriodo*" cssClass="error" /></td>
			</tr>
			<tr>
				<td><form:label path="finPeriodo" class="text0">Fin periodo: </form:label></td>
				<td><form:input path="finPeriodo" class="required inputTextFacturaAgregar"/></td>
				<td><form:errors path="finPeriodo*" cssClass="error" /></td>
			</tr>
			
		</table>
		<center>
				<div class='btnAgregar'>
					<input type=image src="resources/img/boton_agregar.png"
						width="95" height="30" class="inputBoton">
				</div>
				<div class="btnEditar" style="display: none;">
					<input type=image src="resources/img/boton_guardar.png"
						width="95" height="30" class="inputBoton"
						onclick="edit('periodo','editPeriodo')"> 
					<input type=image src="resources/img/btn_eliminar.png" width="95"
						height="30" class="inputBoton"
						onclick="edit('periodo','deletePeriodo')"> 
					<input type=image src="resources/img/btn_cancelar.png" width="95" 
						height="30"	class="inputBoton" 
						onclick="edit('periodo','showPeriodo')">
				</div>
			</center>
				
	</form:form>
	
	<!-- Extreme Table  -->
	<ec:table items="periodoList"
		action="${pageContext.request.contextPath}/showPeriodo"
		view="compact"
		imagePath="${pageContext.request.contextPath}/resources/images/compact/*.gif"
		rowsDisplayed="8" autoIncludeParameters="false" var="periodo">
		
		

		<ec:row highlightRow="true" 
		onclick="onTableClick(	'${pageScope.periodo.idPeriodo}',
								'${pageScope.periodo.nombrePeriodo}',
								'${pageScope.periodo.inicioPeriodo}',								    					
    							'${pageScope.periodo.finPeriodo}');">
			<ec:column property="idPeriodo" title="Id" />
			<ec:column property="nombrePeriodo" title="Periodo"/>
			<ec:column property="inicioPeriodo" title="Fecha Inicio Periodo"/>
			<ec:column property="finPeriodo" title="Fecha Fin Periodo"/>			
		</ec:row>
	</ec:table>
	
	</div>


<div id="footer"><p>The escool project</p></div>
</div>
	
</body>
</html>